import { Link } from 'react-router-dom';
import { Search, Tag, ArrowRight } from 'lucide-react';

interface SearchDropdownProps {
  query: string;
}
export function SearchDropdown({
  query
}: SearchDropdownProps) {
  // Mock search results based on query
  const getSearchResults = (query: string) => {
    const allResults = [{
      title: 'Nourishing Face Oil',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1608248597279-f99d160bfcbc?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
      link: '/skincare'
    }, {
      title: 'Hydrating Face Mask',
      category: 'Skincare',
      image: 'https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
      link: '/skincare'
    }, {
      title: 'Natural Lip Tint',
      category: 'Makeup',
      image: 'https://images.unsplash.com/photo-1586495777744-4413f21062fa?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
      link: '/makeup'
    }, {
      title: 'Meditation Essentials',
      category: 'Wellness',
      image: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
      link: '/wellness'
    }, {
      title: 'Morning Ritual Guide',
      category: 'The Ritual',
      image: 'https://images.unsplash.com/photo-1515377905703-c4788e51af15?ixlib=rb-4.0.3&auto=format&fit=crop&w=150&q=80',
      link: '/the-ritual'
    }];
    if (!query) return [];
    return allResults.filter(item => item.title.toLowerCase().includes(query.toLowerCase()) || item.category.toLowerCase().includes(query.toLowerCase()));
  };
  const results = getSearchResults(query);
  
  if (results.length === 0) {
    return (
      <div className="absolute top-full left-0 mt-2 w-96 bg-white rounded-xl shadow-xl border border-[#e8e5e0] z-50 overflow-hidden animate-in slide-in-from-top-2 duration-200">
        <div className="p-6 text-center">
          <div className="w-12 h-12 mx-auto mb-3 bg-[#f3f0eb] rounded-full flex items-center justify-center">
            <Search className="w-5 h-5 text-[#888888]" />
          </div>
          <p className="text-sm text-[#666666] mb-1">No results found</p>
          <p className="text-xs text-[#888888]">
            Try searching for "skincare", "makeup", or "wellness"
          </p>
        </div>
      </div>
    );
  }

  return (
    <div className="absolute top-full left-0 mt-2 w-96 bg-white rounded-xl shadow-xl border border-[#e8e5e0] z-50 overflow-hidden animate-in slide-in-from-top-2 duration-200">
      {/* Header */}
      <div className="px-4 py-3 bg-gradient-to-r from-[#f8f5f0] to-[#f3f0eb] border-b border-[#e8e5e0]">
        <div className="flex items-center justify-between">
          <h3 className="text-sm font-medium text-[#4a4a4a] flex items-center">
            <Search className="w-4 h-4 mr-2 text-[#4a6b60]" />
            Search Results
          </h3>
          <span className="text-xs text-[#888888] bg-white px-2 py-1 rounded-full">
            {results.length} {results.length === 1 ? 'result' : 'results'}
          </span>
        </div>
      </div>

      {/* Results */}
      <div className="max-h-80 overflow-y-auto">
        {results.map((result, index) => (
          <Link
            key={index}
            to={result.link}
            className="group flex items-center p-4 hover:bg-gradient-to-r hover:from-[#f8f5f0] hover:to-[#f3f0eb] transition-all duration-200 border-b border-[#f0f0f0] last:border-b-0"
          >
            <div className="relative flex-shrink-0">
              <div className="w-14 h-14 rounded-lg overflow-hidden ring-2 ring-[#e8e5e0] group-hover:ring-[#4a6b60] transition-all duration-200">
                <img
                  src={result.image}
                  alt={result.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                />
              </div>
              <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-[#4a6b60] rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                <ArrowRight className="w-3 h-3 text-white" />
              </div>
            </div>
            
            <div className="ml-4 flex-1 min-w-0">
              <h4 className="text-sm font-medium text-[#4a4a4a] group-hover:text-[#4a6b60] transition-colors duration-200 truncate">
                {result.title}
              </h4>
              <div className="flex items-center mt-1">
                <Tag className="w-3 h-3 text-[#888888] mr-1" />
                <span className="text-xs text-[#888888] group-hover:text-[#4a6b60] transition-colors duration-200">
                  {result.category}
                </span>
              </div>
              <div className="w-0 group-hover:w-full h-0.5 bg-gradient-to-r from-[#4a6b60] to-[#c89b9b] mt-2 transition-all duration-300"></div>
            </div>
          </Link>
        ))}
      </div>

      {/* Footer */}
      <div className="border-t border-[#e8e5e0] bg-gradient-to-r from-[#f8f5f0] to-[#f3f0eb] p-4">
        <Link
          to={`/search?q=${encodeURIComponent(query)}`}
          className="group flex items-center justify-center w-full py-2 px-4 bg-white hover:bg-[#4a6b60] text-[#4a6b60] hover:text-white rounded-lg transition-all duration-200 border border-[#4a6b60] hover:border-[#4a6b60] shadow-sm hover:shadow-md"
        >
          <span className="text-sm font-medium mr-2">View all results</span>
          <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-200" />
        </Link>
      </div>
    </div>
  );
}